<script setup lang="ts">
import axios from 'axios'
import { onMounted, ref } from 'vue'

type ChannelItem = {
  id: number
  name: string
}

// 频道接口响应数据
type ChannelResData = {
  data: {
    channels: ChannelItem[]
  }
  message: string
}

const list = ref<ChannelItem[]>([])

/**
 * axios 获取数据 并渲染出列表
 * */
onMounted(async () => {
  const res = await axios.get<ChannelResData>('http://geek.itheima.net/v1_0/channels')
  console.log(res.data.data)
  list.value = res.data.data.channels
})

// 接收频道 id
const props = defineProps<{
  channelID: number
}>()
// console.log(props.channelID)

// 定义事件
defineEmits<{
  // 事件名 changeChannelID
  // 参数 1 个 id 类型为 number
  // 无返回值
  (e: 'changeChannelID', id: number): void
}>()
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <!--  :class="{ active: i === 0 }"
            active 类是否生效
            取决于 i 是否等于 0  
      -->
      <a
        class="item"
        :class="{ active: item.id === channelID }"
        href="javascript:;"
        v-for="(item, i) in list"
        :key="item.id"
        @click="$emit('changeChannelID', item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
